<template>
    <div class="pl_20 pr_20">
        <div class="tk_title flexbox flexcenter">
            资产账户
            <div class="flexbox flexcenter tips_user">
                <i class="el-icon-warning-outline"></i>
                资产账户只用于资产获取，不用于广告账户创建
            </div>
        </div>
        <div class="adver_box">
            <el-table :data="dataForm.base" class="com_table">
                <el-table-column prop="full_name" label="账户">
                    <template slot-scope="scope">
                        <el-popover placement="bottom" width="400" v-model="user_show">
                            <div class="base_select flexbox flexcenter" slot="reference">
                                <div class="select_left flex">
                                    <div class="user_name">
                                        {{scope.row.advertiser_id?scope.row.advertiser_name:"请选择账户"}}
                                    </div>
                                    <div class="adver_id" v-if="scope.row.advertiser_id">ID：{{scope.row.advertiser_id}}</div>
                                </div>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <div class="user_menu">
                                <el-input placeholder="请输入账户名称/ID搜索" size="small" prefix-icon="el-icon-search" v-model="userQuery" clearable>
                                </el-input>
                                <div class="user_list">
                                    <div class="adver_item flexbox flexcenter" :class="{'active':item.advertiser_id==scope.row.advertiser_id}" v-for="(item,index) in filteredData(userQuery,adverList,'advertiser_id','advertiser_name')" :key="index" @click="selectUser(item)">
                                        <img src="@/assets/img/market_checked.svg" alt="" class="adver_check">
                                        <div class="adver_content flexbox flexcenter flexbetween">
                                            <div>
                                                <div class="user_name">{{item.advertiser_name}}</div>
                                                <div class="adver_id">ID：{{item.advertiser_id}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="full_name" label="商店">
                    <template slot-scope="scope">
                        <el-popover placement="bottom" width="400" v-model="shop_show" :disabled="!scope.row.advertiser_id" @show="getStore">
                            <div class="base_select flexbox flexcenter" :class="{'adver_disabled':scope.row.advertiser_id ==''}" slot="reference">
                                <div class="select_left flex">
                                    <div class="user_name">
                                        {{scope.row.store_id?scope.row.store_name:"请选择商店"}}
                                    </div>
                                    <div class="adver_id" v-if="scope.row.store_id">ID：{{scope.row.store_id}}</div>
                                </div>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <div class="user_menu">
                                <el-input placeholder="请输入商店名称/ID搜索" size="small" prefix-icon="el-icon-search" v-model="storeQuery" clearable>
                                </el-input>
                                <div class="user_list" v-loading="store_load" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                                    <div class="adver_item flexbox flexcenter" :class="{'active':item.store_id==scope.row.store_id}" v-for="(item,index) in filteredData(storeQuery,storeList,'store_id','store_name')" :key="index" @click="selectStore(item)">
                                        <img src="@/assets/img/market_checked.svg" alt="" class="adver_check">
                                        <div class="adver_content flexbox flexcenter flexbetween">
                                            <div>
                                                <div class="user_name">{{item.store_name}}</div>
                                                <div class="adver_id">ID：{{item.store_id}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="full_name" label="广告发布身份">
                    <template slot-scope="scope">
                        <el-popover placement="bottom" width="400" v-model="id_show" :disabled="!scope.row.advertiser_id" @show="getIdentity">
                            <div class="base_select flexbox flexcenter" :class="{'adver_disabled':scope.row.advertiser_id ==''}" slot="reference">
                                <div class="select_left flex flexbox flexcenter">
                                    <template v-if="scope.row.identity_id">
                                        <img :src="scope.row.profile_image" alt="" class="anchor_img">
                                        <div class="flex anchor_info">
                                            <div class="user_name">
                                                {{scope.row.display_name}}
                                            </div>
                                            <div class="adver_id">ID：{{scope.row.identity_id}}</div>
                                        </div>
                                    </template>
                                    <div class="user_name" v-else>请选择广告发布身份</div>
                                </div>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <div class="user_menu">
                                <el-input placeholder="请输入发布身份名称/ID搜索" size="small" prefix-icon="el-icon-search" v-model="identityQuery" clearable>
                                </el-input>
                                <div class="user_list" v-loading="ident_load" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                                    <div class="adver_item" :class="{'active':item.identity_id==scope.row.identity_id}" v-for="(item,index) in filteredData(identityQuery,identityList,'identity_id','display_name')" :key="index" @click="selectIdent(item)">
                                        <img src="@/assets/img/market_checked.svg" alt="" class="adver_check">
                                        <div class="flexbox flexcenter flexbetween">
                                            <img :src="item.profile_image" alt="" class="anchor_img">
                                            <div class="flex anchor_info">
                                                <div class="user_name">{{item.display_name}}</div>
                                                <div class="adver_id">ID：{{item.identity_id}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    props: ["dataForm", "adverList"],
    components: {},
    name: "",
    data() {
        return {
            userQuery: "",
            storeQuery: "",
            identityQuery: "",
            storeList: [],
            identityList: [],
            store_load: false,
            ident_load: false,
            user_show: false,
            shop_show: false,
            id_show: false,
        };
    },
    created() {},
    methods: {
        // 选择账户
        selectUser(item) {
            let that = this;
            if (item.advertiser_id == that.dataForm.base[0].advertiser_id) {
                return;
            } else {
                if (that.dataForm.is_change) {
                    this.$confirm("更换账户会清空已选数据", "是否更换", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            that.dataForm.base[0].advertiser_id =
                                item.advertiser_id;
                            that.dataForm.base[0].advertiser_name =
                                item.advertiser_name;
                            that.dataForm.base[0].store_id = "";
                            that.dataForm.base[0].store_authorized_bc_id = "";
                            that.dataForm.base[0].catalog_id = "";
                            that.dataForm.base[0].catalog_authorized_bc_id = "";
                            that.dataForm.base[0].targeting_region_codes = [];
                            that.dataForm.base[0].identity_authorized_bc_id =
                                "";
                            that.dataForm.base[0].identity_id = "";
                            that.dataForm.base[0].identity_type = "";
                            that.dataForm.is_change = false;
                            that.dataForm.delivery_index = 0;
                            that.dataForm.audience_index = 0;
                            that.dataForm.creatives_index = 0;
                            that.dataForm.creatives_base = {
                                operation_status: "ENABLE",
                                ad_name: "",
                                ad_format: "SINGLE_VIDEO",
                                creatives_class: [
                                    {
                                        creaname: "创意分组1",
                                        call_to_action: "APPLY_NOW",
                                        card_type: "",
                                        card_tags: [],
                                        card_show_price: false,
                                        item_group_ids: [],
                                        vertical_video_strategy: "SINGLE_VIDEO",
                                        creatives: [],
                                    },
                                ],
                            };
                            that.dataForm.adgroup = {
                                adgroup_name: "",
                                operation_status: "ENABLE",
                                placements: ["PLACEMENT_TIKTOK"],
                                comment_disabled: false,
                                video_download_disabled: true,
                                promotion_type: "VIDEO_SHOPPING",
                                shopping_ads_type: "VIDEO",
                                product_source: "STORE",
                                delivery: [
                                    {
                                        budget: 20,
                                        delname: "预算分组1",
                                        budget_mode: "BUDGET_MODE_DAY",
                                        schedule_type: "SCHEDULE_FROM_NOW",
                                        schedule_start_time: "",
                                        schedule_end_time: "",
                                        dayparting_type: 1,
                                        dayparting:
                                            "000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000",
                                        optimization_goal: "VALUE",
                                        optimization_event: "SHOPPING",
                                        deep_bid_type: "VO_HIGHEST_VALUE",
                                        roas_bid: "",
                                        bid_type: "BID_TYPE_NO_BID",
                                        bid_price: null,
                                        conversion_bid_price: null,
                                        pacing: "PACING_MODE_SMOOTH",
                                        billing_event: "OCPM",
                                    },
                                ],
                                audience: [
                                    {
                                        audname: "定向分组1",
                                        location_ids: [],
                                        audience_ids: [],
                                        excluded_audience_ids: [],
                                        all_audience: [],
                                        interest_category_ids: [],
                                        interest_keywords_ids: [],
                                        age_groups: [],
                                        age_all: "1",
                                        operating_systems: [],
                                        operating_all: "1",
                                        gender: "GENDER_UNLIMITED",
                                        languages: [],
                                        actions: [
                                            {
                                                action_category_ids: [],
                                                action_scene: "VIDEO_RELATED",
                                                action_period: "",
                                                is_show: false,
                                                video_user_actions: [],
                                            },
                                            {
                                                action_category_ids: [],
                                                action_scene: "CREATOR_RELATED",
                                                action_period: 0,
                                                is_show: false,
                                                video_user_actions: [],
                                            },
                                            {
                                                action_category_ids: [],
                                                action_scene: "HASHTAG_RELATED",
                                                action_period: 0,
                                                is_show: false,
                                                video_user_actions: [
                                                    "VIEW_HASHTAG",
                                                ],
                                            },
                                        ],
                                    },
                                ],
                            };
                            that.sessionSave();
                            this.user_show = false;
                        })
                        .catch(() => {});
                } else {
                    that.dataForm.base[0].advertiser_id = item.advertiser_id;
                    that.dataForm.base[0].advertiser_name =
                        item.advertiser_name;
                    that.dataForm.base[0].store_id = "";
                    that.dataForm.base[0].store_authorized_bc_id = "";
                    that.dataForm.base[0].catalog_id = "";
                    that.dataForm.base[0].catalog_authorized_bc_id = "";
                    that.dataForm.base[0].targeting_region_codes = [];
                    that.dataForm.base[0].identity_authorized_bc_id = "";
                    that.dataForm.base[0].identity_id = "";
                    that.dataForm.base[0].identity_type = "";
                    that.sessionSave();
                    this.user_show = false;
                }
            }
            // that.sessionSave();
        },

        // 选择商店
        selectStore(item) {
            this.dataForm.base[0].store_id = item.store_id;
            this.dataForm.base[0].store_name = item.store_name;
            this.dataForm.base[0].store_authorized_bc_id =
                item.store_authorized_bc_id;
            this.dataForm.base[0].catalog_id = item.catalog_id;
            this.dataForm.base[0].catalog_authorized_bc_id = item.catalog_id;
            this.dataForm.base[0].targeting_region_codes =
                item.targeting_region_codes;
            this.sessionSave();
            this.shop_show = false;
        },

        // 选择身份
        selectIdent(item) {
            this.dataForm.base[0].identity_authorized_bc_id =
                item.identity_authorized_bc_id;
            this.dataForm.base[0].identity_id = item.identity_id;
            this.dataForm.base[0].identity_type = item.identity_type;
            this.dataForm.base[0].profile_image = item.profile_image;
            this.dataForm.base[0].display_name = item.display_name;
            this.sessionSave();
            this.id_show = false;
        },
        //获取商店
        async getStore() {
            this.storeList = [];
            this.store_load = true;
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokInfo/storeList",
                {
                    page: 1,
                    advertiser_id: this.dataForm.base[0].advertiser_id,
                    store_type: "TIKTOK_SHOP",
                }
            );
            if (res.code !== 200) {
                this.store_load = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.store_load = false;
                this.storeList = res.data;
            }
        },

        //获取身份
        async getIdentity() {
            this.identityList = [];
            this.ident_load = true;
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokInfo/identityList",
                {
                    page: 1,
                    advertiser_id: this.dataForm.base[0].advertiser_id,
                }
            );
            if (res.code !== 200) {
                this.ident_load = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.ident_load = false;
                this.identityList = res.data;
            }
        },

        // 筛选
        filteredData(query, list, id, name) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();
            list = list.filter(function (item) {
                if (item[name]) {
                    if (item[id] == query || item[name].indexOf(query) !== -1) {
                        return item;
                    }
                }
            });
            return list;
        },
        sessionSave() {
            this.$emit("sessionSave");
        },
    },
};
</script>


<style scoped>
.base_select {
    height: 80px;
    border: 1px solid #dcdee2;
    border-radius: 2px;
    padding: 0 16px;
    cursor: pointer;
}
.adver_disabled {
    background-color: #fbfbfc;
    cursor: not-allowed;
}
.base_select .el-icon-caret-bottom {
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 15px;
}
.user_name {
    font-size: 14px;
    color: #17233d;
    height: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    line-height: 22px;
}
.adver_id {
    font-size: 14px;
    line-height: 22px;
    height: 22px;
    color: #b4b7bd;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.anchor_info {
    margin-left: 12px;
}
.anchor_img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.user_menu {
    padding: 0 8px;
}
.user_list {
    margin: 12px -20px 0 -20px;
    padding: 0 20px;
    height: 350px;
    overflow: auto;
}
.adver_item {
    border: 1px solid #dcdee2;
    border-radius: 2px;
    padding: 12px 16px;
    cursor: pointer;
    margin-bottom: 12px;
    position: relative;
}
.adver_check {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
.adver_item.active {
    background-color: rgba(68, 117, 255, 0.05);
    border: 1px solid #4475ff;
}
.adver_item.active .adver_check {
    display: block;
}
.tips_user {
    font-size: 13px;
    color: #b4b7bd;
    margin-left: 8px;
    font-weight: normal;
}
.tips_user .el-icon-warning-outline {
    font-size: 13px;
    margin-right: 5px;
}
/deep/ .adver_box .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #fff;
}
</style>

